<template>
    <div class="signin">
        <div class="sign-card">
            <p>连续签到 {{ signNum }} 天</p>
        </div>

        <van-button round type="primary" @click="signin">{{
            isSign ? '今日已签到' : '签到'
        }}</van-button>
    </div>
</template>

<script>
export default {
    async mounted() {
        // 调用后台接口，查看今天是否签到
        let res = await this.$http.get('/signs/today');
        console.log(res);
        this.isSign = res.data.isSign;
        // 调用后台接口，查询已签到天数
        res = await this.$http.get('/signs/count');
        console.log(res);
        this.signNum = res.data.sign_num;
    },
    data() {
        return {
            isSign: false,
            signNum: 0,
        };
    },
    methods: {
        async signin() {
            if (this.isSign) {
                this.$notify({
                    type: 'warning',
                    message: '今日已签到',
                });
                return;
            }
            // 调用签到接口，进行签到
            const res = await this.$http.post('/signs');
            // 如果签到失败，提示用户
            if (res.code !== 200) {
                this.$notify({
                    type: 'danger',
                    message: res.message,
                });
                return;
            }
            // 走到这里，说明签到成功
            this.$notify({
                type: 'success',
                message: res.message,
            });
            // 修改签到按钮状态
            this.isSign = true;
            this.signNum += 1;
        },
    },
};
</script>

<style lang="less" scoped>
.signin {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sign-card {
    margin-top: 100px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.van-button {
    width: 40%;
    margin: 20px;
}
</style>
